import { huanJing } from '../../huanJing/HuanJing.js'

class YiDongJieMian extends HTMLElement {
	yaoGan = null
	shiJiao = null
	tiao = null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })

		let style = document.createElement('style')
		style.textContent = `
			* {
				pointer-events: all;
			}
			#yi-dong {
				width: 150px;
				height: 150px;
				position: absolute;
				bottom: 80px;
				left: 70px;
				border-radius: 50%;
				border: 1px solid rgba(255, 255, 255, 0.5);
				background-color: rgba(255, 255, 255, 0.2);
			}
			
			#yao-gan {
				width: 50px;
				height: 50px;
				position: relative;
				top: 75px;
				left: 75px;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
			}
			
			#shi-jiao {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 50vh;
				height: 100vw;
				z-index: 0;
			}
		`
		shadow.appendChild(style);
		// 移动
		let yiDong = document.createElement('div')
		yiDong.id = 'yi-dong'
		this.yaoGan = document.createElement('div')
		this.yaoGan.id = 'yao-gan'
		yiDong.appendChild(this.yaoGan)
		shadow.appendChild(yiDong)
		// 视角
		this.shiJiao = document.createElement('div')
		this.shiJiao.id = 'shi-jiao'
		shadow.appendChild(this.shiJiao)
		// 跳
		this.tiao = document.createElement('an-niu')
		this.tiao.setAttribute('wen-ben', '跳')
		this.tiao.style.setProperty('inset', 'auto 70px 70px auto')
		this.tiao.style.setProperty('z-index', '1')
		shadow.appendChild(this.tiao)
		
		window.addEventListener('resize', () => {
			this.style.setProperty('display', huanJing.shiYiDongDuan ? 'block' : 'none')
		})
	}
	
	connectedCallback() {
		this.style = `
			${this.style.cssText}
			display: ${huanJing.shiYiDongDuan ? 'block' : 'none'};
			position: absolute;
			pointer-events: none;
			inset: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
		`
	}
}

customElements.define('yi-dong-jie-mian', YiDongJieMian)
